<template>
  <div class="profile">
    <van-nav-bar
        title="个人中心"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <div class="profile-info">
      <div class="user-img">
        <img :src="imgUrl" alt="">
        <span>点击更换头像</span>
      </div>
      <div class="user-info">
        <van-field v-model="account" label="商城账号" disabled/>
        <van-field v-model="points" label="我的积分" disabled/>
        <van-field v-model="nickname" label="商城昵称" />
        <van-field v-model="sex" label="性别" />
      </div>
    </div>

    <div class="account">
      <van-cell value="切换账户" />
      <van-cell value="退出登录" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Profile",
  data(){
    return{
      imgUrl: require('@/assets/img/lamb.jpg'),
      account: 'admin',
      points: 500,
      nickname: 'admin',
      sex: '男'
    }
  },
  methods:{
    onClickLeft(){
      this.$router.push({
        path: "/me",
        query:{
          tab: 4
        }
      })
    }
  }
}

</script>

<style scoped lang="less">
.profile{
  padding-top: 50px;
  background: #F7F8FA;
  min-height: 100vh;
}
.user-img{
  text-align: center;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  span{
    padding-top: 10px;
    color: #FF5001;
  }
}

.account{
  padding-top: 50px;
  .van-cell__value--alone{
    text-align: center;
  }
}
</style>
